<template>
  <div class="app-container">
    <el-container>
      <el-header style="height: 48px">
        <CodeSearch ref="codeSearchRef" :modelInfo="vueData.modelInfo" @load="loadDataList" />
      </el-header>
      <el-container>
        <el-aside v-if="vueData.asideShow" width="200px">
          <CodeCate :modelInfo="vueData.modelInfo" @load="loadDataList" />
        </el-aside>
        <el-main>
          <div class="flex flex-wrap items-center gap-4 mb8">
            <el-button type="primary" @click="showAddWin">新增</el-button>
            <el-button type="success" @click="showAddWin">提交</el-button>
            <el-button @click="showAddWin">变更</el-button>
            <el-button @click="showAddWin">批量修改</el-button>
            <el-button @click="showAddWin">任务列表</el-button>
            <el-input
              v-model="vueData.fullSearch"
              style="width: 280px"
              placeholder="检索：关键词"
              suffix-icon="Search"
            />
            <el-dropdown placement="bottom">
              <el-button>导入</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>导入编辑</el-dropdown-item>
                  <el-dropdown-item>导入变更</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom">
              <el-button>导出</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>导出列表</el-dropdown-item>
                  <el-dropdown-item>导出查询</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom">
              <el-button>设置</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>展示列</el-dropdown-item>
                  <el-dropdown-item>默认排序</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <CodeList
            :modelInfo="vueData.modelInfo"
            :total="vueData.pageInfo.total"
            :page="vueData.pageInfo.pageNum"
            :data="vueData.dataList"
            @load="loadDataList"
          />
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :title="vueData.editorTitle" v-model="vueData.editorShow" width="90%" :close-on-click-modal="false">
      <el-space class="editor-toolbar">
          <!-- <el-button type="primary" plain icon="Edit" @click="handleTemp">暂存</el-button> -->
        <el-button type="primary" icon="Check" @click="handleSave">保存</el-button>
        <el-button type="success" icon="Finished" @click="handleSubmit">提交</el-button>
      </el-space>
      <CodeEditor ref="codeEditorRef" :modelInfo="vueData.modelInfo" />
    </el-dialog>
  </div>
</template>

<script name="DataApply" setup>
import { getCurrentInstance, onMounted, reactive } from 'vue';
import CodeSearch from '@/components/Melon/CodeSearch/index.vue';
import CodeCate from '@/components/Melon/CodeCate/index.vue';
import CodeList from '@/components/Melon/CodeList/index.vue';
import CodeEditor from '@/components/Melon/CodeEditor/index.vue';
import deployApi from '@/api/data/deploy.js';
import applyApi from '@/api/data/apply.js';

const { proxy } = getCurrentInstance();
const query = proxy.$route.query;

const vueData = reactive({
  areaCode: query?.a,
  modelCode: query?.c,
  modelInfo: {},
  pageInfo: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
  fullSearch: '',
  dataList: [],
  dataLoading: false,
  asideShow: false,
  editorShow: false,
  editorTitle: '新增',
});

function loadFullInfo() {
  deployApi.getFullInfo(vueData.areaCode, vueData.modelCode).then((res) => {
    vueData.modelInfo = res.data;
  });
}

function loadDataList(pageData) {
  if (pageData != null) {
    if (pageData.page != null) {
      vueData.pageInfo.pageNum = pageData.page;
    }
    if (pageData.limit != null) {
      vueData.pageInfo.pageSize = pageData.limit;
    }
  }
  const condList = proxy.$refs.codeSearchRef.getCondList();
  const { areaCode, modelCode } = vueData;
  const pageQuery = {
    ...vueData.pageInfo,
    queryParam: {
      areaCode,
      modelCode,
      condList: condList,
    },
  };
  applyApi.selectData(pageQuery, areaCode).then((res) => {
    vueData.dataLoading = false;
    vueData.dataList = res.rows.map((it) => {
      return {
        ...it.dataHash,
        ...it,
        dataHash: null,
      };
    });
    vueData.pageInfo.total = res.total;
  });
}

function showAddWin() {
  vueData.editorShow = true;
  vueData.editorTitle = `${vueData.modelInfo?.name}(${vueData.modelInfo?.code})新增`;
  proxy.$refs.codeEditorRef.loadEditorData({ id: null });
}

function handleSave() {
  proxy.$refs.codeEditorRef.handleSave();
}

function handleSubmit() {
  proxy.$refs.codeEditorRef.handleSubmit();
}

onMounted(() => {
  loadFullInfo();
  loadDataList({ page: 1 });
});
</script>

<style lang='scss' scoped>
.app-container {
  .el-main {
    padding: 0px;
  }
}

.editor-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 8px 10px;
  padding: 4px 0;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
</style>
